<style type="text/css">
  .dbusage {
    /* width: 80px; */
    white-space:nowrap
  }
</style>
<!-- <div class="row">
  <h1 translate lib="web">customers</h1>
</div> -->
<div class="col-sm-12 text-right">
  <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
  <!-- <em class="fas fa-cog" ng-show="ctrl.loading!=true" title="I spin, while loading data"></em> -->
<a href="#/Customer/new" class="btn btn-info" translate lib="web"
    ng-show="menuctrl.hasrole('customer admins') || menuctrl.hasrole('resellers')">addcustomer</a>
</div>
<div ng-show="ctrl.errormessage != ''" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;" aria-label="List of customers">
  <thead class="thead-dark">
    <tr>
      <th ng-click="ctrl.ToggleOrder('name')" scope="col"><strong translate lib="web">name</strong></th>
      <th ng-click="ctrl.ToggleOrder('dbusage')" class="dbusage" scope="col"><strong translate lib="web">dbusage</strong></th>
      <th class="w-150" ng-click="ctrl.ToggleOrder('_created')" scope="col"><strong translate lib="web">created</strong>
      </th>
      <th class="w-150" scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td><a style="color: inherit; text-decoration: inherit;" ng-href="#/Customer/{{model._id}}">{{model.name}}</a></td>
      <td class="dbusage">
        <div >
          <format-bytes ng-model="model.dbusage" decimal=0 />
        </div>
      </td>
      <td>
        <timesince ng-model="model._created" />
      </td>
      <td>
        <a class="btn" ng-href="#/Customer/{{model._id}}" ng-disabled="ctrl.loading==true"><em class="fas fa-edit"></em></a>
        <a class="btn" href ng-click="ctrl.DeleteOne(model)" ng-disabled="ctrl.loading==true"
        ng-class="{'btn-danger': ctrl.shiftdown==true && ctrl.collection == 'users' && (model._type == 'user' || model._type == 'customer')}"><em
            class="fas fa-trash"></em></a>
      </td>
    </tr>
  </tbody>
</table>